{% from "macros.html" import render_pagination %}

<!DOCTYPE html>
<html>
<head>
    <title>配件管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1 class="page-title">配件管理</h1>
        <div class="nav-menu">
            <a href="{{ url_for('index') }}" class="nav-item">返回首页</a>
            <a href="#" class="nav-item add-btn" onclick="showModal()">新增配件</a>
        </div>
        
        <!-- 新增配件模态框 -->
        <div id="addModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="hideModal()">&times;</span>
                <h2>新增配件</h2>
                <form action="{{ url_for('add_part') }}" method="POST">
                    <div class="form-group">
                        <label for="part_number">配件编号</label>
                        <input type="text" id="part_number" name="part_number" required>
                    </div>
                    <div class="form-group">
                        <label for="name">配件名称</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="unit">单位</label>
                        <input type="text" id="unit" name="unit" required>
                    </div>
                    <div class="form-group">
                        <label for="cost_price">进价</label>
                        <input type="number" step="0.01" id="cost_price" name="cost_price" required>
                    </div>
                    <div class="form-group">
                        <label for="price">售价</label>
                        <input type="number" step="0.01" id="price" name="price" required>
                    </div>
                    <button type="submit" class="nav-item add-btn">保存</button>
                </form>
            </div>
        </div>
        
        <!-- 添加编辑模态框 -->
        <div id="editModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="hideEditModal()">&times;</span>
                <h2>编辑配件</h2>
                <form action="{{ url_for('edit_part') }}" method="POST">
                    <input type="hidden" id="edit_id" name="id">
                    <div class="form-group">
                        <label for="edit_part_number">配件编号</label>
                        <input type="text" id="edit_part_number" name="part_number" required>
                    </div>
                    <div class="form-group">
                        <label for="edit_name">配件名称</label>
                        <input type="text" id="edit_name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="edit_unit">单位</label>
                        <input type="text" id="edit_unit" name="unit" required>
                    </div>
                    <div class="form-group">
                        <label for="edit_cost_price">进价</label>
                        <input type="number" step="0.01" id="edit_cost_price" name="cost_price" required>
                    </div>
                    <div class="form-group">
                        <label for="edit_price">售价</label>
                        <input type="number" step="0.01" id="edit_price" name="price" required>
                    </div>
                    <button type="submit" class="nav-item add-btn">保存</button>
                </form>
            </div>
        </div>
        
        <div class="section">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>配件编号</th>
                        <th>配件名称</th>
                        <th>单位</th>
                        <th>进价</th>
                        <th>售价</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for part in parts %}
                    <tr>
                        <td>{{ part.id }}</td>
                        <td>{{ part.part_number }}</td>
                        <td>{{ part.name }}</td>
                        <td>{{ part.unit }}</td>
                        <td>{{ part.cost_price }}</td>
                        <td>{{ part.price }}</td>
                        <td>
                            <a href="#" class="action-btn edit-btn" onclick="showEditModal('{{ part.id }}', '{{ part.part_number }}', '{{ part.name }}', '{{ part.unit }}', '{{ part.cost_price }}', '{{ part.price }}')">编辑</a>
                            <a href="#" class="action-btn delete-btn">删除</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            {{ render_pagination(pagination, 'parts') }}
        </div>
    </div>

    <script>
        function showModal() {
            document.getElementById('addModal').style.display = 'block';
        }
        
        function hideModal() {
            document.getElementById('addModal').style.display = 'none';
        }
        
        window.onclick = function(event) {
            var modal = document.getElementById('addModal');
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
        
        function showEditModal(id, partNumber, name, unit, costPrice, price) {
            document.getElementById('edit_id').value = id;
            document.getElementById('edit_part_number').value = partNumber;
            document.getElementById('edit_name').value = name;
            document.getElementById('edit_unit').value = unit;
            document.getElementById('edit_cost_price').value = costPrice;
            document.getElementById('edit_price').value = price;
            document.getElementById('editModal').style.display = 'block';
        }
        
        function hideEditModal() {
            document.getElementById('editModal').style.display = 'none';
        }
    </script>
</body>
</html> 